<template>
    <div>
      <button class="upload-button" @click="UploadNote()">上传笔记</button>

      <!-- 搜索行 -->
    <div class="search-row">
      <input type="text" v-model="searchKey" class="search-input" placeholder="搜索笔记">
      <button class="search-button" @click="searchByKey">搜索</button>
    </div>
    
    
    <!-- 排序行 -->
    <div class="sort-row">
      <button class="sort-button" @click="sortnotesByLikes">按点赞数排序</button>
      <button class="sort-button" @click="sortnotesByCollect">按收藏数排序</button>
      <button class="sort-button" @click="sortnotesByReview">按评论数排序</button>
    </div>

      <div class="food-note">
        <div class="note-content" v-for="(note, index) in notes" :key="index">
          <h3>{{ note.name }}</h3>
          <div>
            <img :src="note.image" :alt="note.title" class="note-image">
            <span>{{ note.content }}</span>
          </div>
          <div class="interaction">
            <button class="view-details" @click="viewNoteDetail(note)">查看详情</button>
            <button class="like-button" @click="toggleLike(index)">
              <img :src="likeIcon(note.objectid)" :alt="note.name" class="like-icon">
              <span class="like-count">{{ likesTotal[note.objectid] }}</span>
            </button>
            <button class="collect-button" @click="toggleCollect(index)">
              <img :src="likeCollect(note.objectid)" alt="收藏" class="collect-icon">
              <span class="like-count">{{ collectTotal[note.objectid] }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  
import axios from 'axios';
import Vue from 'vue';
axios.defaults.baseURL="http://localhost:8087"
  export default {
    name: 'FoodNotes',
    data() {
      return {
        id:this.$route.query,
        isCollect:false,
        notes: [],
        likesTotal:[],
        collectTotal:[],
        reviewTotal:[],
        likes:[],
        collect:[],
        review:[],
        showFoodForm: false,
        searchKey:"",
        collectSort:false,
        likesSort:false,
        reviewSort:false
      };
    },
    created()
    {
      console.log("created")
      console.log(this.id)
      if(typeof this.id == 'string')
      {
        this.isCollect=true
      }
      else{
        this.isCollect=false
      }
      this.init()
    },
    methods: {
      init()
      {
        let userid=sessionStorage.getItem("userid")
        let str=null
        if(this.isCollect)
        {
          str=`/findObjectByCollect/${this.id}&&2&&${this.searchKey}`
        }else
        {
          str=`/findObject/2`
        }
        axios.get(str).then(res=>{
        Vue.set(this,'notes',res.data)
        // this.notes=res.data
        for(let i=0;i<this.notes.length;++i)
        {
          
          axios.get(`/findLikes_total/${this.notes[i].type}&&${this.notes[i].objectid}`).then(res=>{
            // this.likesTotal[this.notes[i].objectid]=(res.data.likesTotal)
            Vue.set(this.likesTotal,this.notes[i].objectid,res.data.likesTotal)
          })
          axios.get(`/findCollect_total/${this.notes[i].type}&&${this.notes[i].objectid}`).then(res=>{
            // this.collectTotal[this.notes[i].objectid]=(res.data.collectTotal)
            Vue.set(this.collectTotal,this.notes[i].objectid,res.data.collectTotal)
          })
          axios.get(`/findReview_total/${this.notes[i].type}&&${this.notes[i].objectid}`).then(res=>{
            // this.reviewTotal[this.notes[i].objectid]=(res.data.reviewTotal)
            Vue.set(this.reviewTotal,this.notes[i].objectid,res.data.reviewTotal)
          })
          if(userid)
          {
            axios.post(`/findIfLikes?likesid=`+userid+`&type=2&objectid=`+this.notes[i].objectid).then(res=>{
            if(res.data){
              Vue.set(this.likes,this.notes[i].objectid,true)
              // this.likes[this.notes[i].objectid]=true
              console.log(res.data)
            }else{
              Vue.set(this.likes,this.notes[i].objectid,false)
              // this.likes[this.notes[i].objectid]=false
              console.log(res.data)
            }
            })
            axios.post(`/findIfCollect?collectid=`+userid+`&type=2&objectid=`+this.notes[i].objectid).then(res=>{
              if(res.data){
                Vue.set(this.collect,this.notes[i].objectid,true)
                // this.collect[this.notes[i].objectid]=true
                console.log(res.data)
              }else{
                Vue.set(this.collect,this.notes[i].objectid,false)
                // this.collect[this.notes[i].objectid]=false
                console.log(res.data)
              }
            })
          }
        }
      })
      },
      UploadNote()
      {
        this.$router.push({
                  name:'noteupload',

              })
      },
      viewNoteDetail(note) {
        // 使用food对象跳转到FoodDetail组件
        this.$router.push({
                  name:'notedetail',
                  query:note
              })
      },
      searchByKey(){
      let key=this.searchKey
      let type=2;
      let str=null
      if(this.isCollect)
        str=`/findObjectByCollect/${this.id}&&2&&${key}`
      else
        str=`/findObjectByKey/${key}&&${type}`
      axios.get(str).then(res=>{
        Vue.set(this, 'notes', res.data)
      })
    },
    sortnotesByCollect(){
      //true 升序 false 降序
      let key=this.searchKey
      console.log(this.collectSort)
      let str=null
      if(this.isCollect)
        str=`/findObjectByCollectSortCollectAsc/${this.id}&&2&&${key}`
      else 
        str=`/findObjectByKeySortCollectAsc/${key}&&2`
      if(this.collectSort){
        axios.get(str).then(res=>{
          Vue.set(this, 'notes', res.data)
        })
      }else{
        str=str.replace("Asc","Desc")
        axios.get(str).then(res=>{
          Vue.set(this, 'notes', res.data)
        })
      }
      this.collectSort=!this.collectSort
    },
    sortnotesByLikes(){
      let key=this.searchKey
      let str=null
      if(this.isCollect)
        str=`/findObjectByCollectSortLikesAsc/${this.id}&&2&&${key}`
      else 
        str=`/findObjectByKeySortLikesAsc/${key}&&2`
      if(this.likesSort){
        axios.get(str).then(res=>{
          Vue.set(this, 'notes', res.data)
        })
      }else{
        str=str.replace("Asc","Desc")
        axios.get(str).then(res=>{
          Vue.set(this, 'notes', res.data)
        })
      }
      this.likesSort=!this.likesSort
    },
    sortnotesByReview(){
      let key=this.searchKey
      let str=null
      if(this.isCollect)
        str=`/findObjectByCollectSortReviewAsc/${this.id}&&2&&${key}`
      else 
        str=`/findObjectByKeySortReviewAsc/${key}&&2`
      if(this.reviewSort){
        axios.get(str).then(res=>{
          Vue.set(this, 'notes', res.data)
        })
      }else{
        str=str.replace("Asc","Desc")
        axios.get(str).then(res=>{
          Vue.set(this, 'notes', res.data)
        })
      }
      this.reviewSort=!this.reviewSort
    },
    toggleLike(i) {
      let userid=sessionStorage.getItem("userid")
      if(userid)
      {
        Vue.set(this.likes, this.notes[i].objectid, !this.likes[this.notes[i].objectid])
        // this.likes[i]=!this.likes[i]
        // console.log(this.likes[i])
        if(this.likes[this.notes[i].objectid])
        {
          axios.post("/insertlikes?likesid="+userid+`&type=2&objectid=`+this.notes[i].objectid).then(res=>{
            Vue.set(this.likesTotal,this.notes[i].objectid,this.likesTotal[this.notes[i].objectid]+1)
            console.log(res.data)
          })
        }else{
          axios.delete("/deletelikes?likesid="+userid+`&type=2&objectid=`+this.notes[i].objectid).then(res=>{
            Vue.set(this.likesTotal,this.notes[i].objectid,this.likesTotal[this.notes[i].objectid]-1)
            console.log(res.data)
          })
        }
        
      }else{
        alert("请先登录");
        this.$router.push({
                name:'login'
                
            })
      }
    },
    toggleCollect(i) {
      let userid=sessionStorage.getItem("userid")
      if(userid)
      {
        Vue.set(this.collect, this.notes[i].objectid, !this.collect[this.notes[i].objectid])
        // this.likes[i]=!this.likes[i]
        // console.log(this.collect[i])
        if(this.collect[this.notes[i].objectid])
        {
          axios.post("/insertcollect?collectid="+userid+`&type=2&objectid=`+this.notes[i].objectid).then(res=>{
            Vue.set(this.collectTotal,this.notes[i].objectid,this.collectTotal[this.notes[i].objectid]+1)
            console.log(res.data)
          })
        }else{
          axios.delete("/deletecollect?collectid="+userid+`&type=2&objectid=`+this.notes[i].objectid).then(res=>{
            Vue.set(this.collectTotal,this.notes[i].objectid,this.collectTotal[this.notes[i].objectid]-1)
            console.log(res.data)
          })
        }
        
      }else{
        alert("请先登录");
        this.$router.push({
                name:'login'
                
            })
      }
      
    },
    likeIcon(i) {
      return this.likes[i]  ? require('../assets/like.png') :require('../assets/unlike.png');
    },
    likeCollect(i) {
      return this.collect[i]  ? require('../assets/collect.png') :require('../assets/discollect.png');
    },
    
    }
  };
  </script>
  
  <style scoped>
  .food-note {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
  }
  .note-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out;
  }
  .note-content:hover {
    transform: translateY(-5px);
  }
  .note-content h3 {
    margin-bottom: 10px;
    color: #333;
    font-size: 1.8rem;
  }
  .interaction {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .interaction button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f7f7f7;
    color: #333;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
  }
  .interaction button:hover {
    background-color: #e0e0e0;
    color: #000;
  }
  .like-icon,
  .collect-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  .note-image {
    float: left;
    max-width: 50%;
    height: auto;
    margin-left: 10px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
    padding-left: 10px;
  }
  @media (max-width: 600px) {
    .note-content {
      border: none;
      border-radius: 0;
      box-shadow: none;
    }
    .note-image {
      margin-top: 0;
      border-top: none;
      padding-top: 0;
    }
  }
  .upload-button {
    padding: 10 20px;
    border: none;
    background-color: #5cb85c;
    color: white;
    font-size: 16px;
    font: bold;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  /* 搜索行样式 */
.search-row {
  display: flex;
  
  margin-bottom: 10px; /* 添加间距 */
}

.search-input {
  /* flex: 1;  */
  margin-top: 10px;
  height: 20px;
  margin-left: auto;
  width: 500px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-button {
  margin-top: 10px;
  margin-right: auto;
  padding: 10px 20px;
  height: 40px;
  border: none;
  background-color: #337ab7;
  color: white;
  font-size: 15px;
  border-radius: 4px;
  margin-left: 10px; /* 添加间距 */
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: #286090;
}

/* 排序行样式 */
.sort-row {
  display: flex;
  margin-left: 520px;
}


.sort-button {
  padding: 10px 20px;
  border: none;
  background-color: #5cb85c;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-right: 5px
}

.sort-button:hover {
  background-color: #449d44;
}

.sort-button img {
  width: 20px;
  height: 20px;
  vertical-align: middle; /* 垂直对齐图标和文字 */
}
  </style>
  